<template>
    <div class="card">
        <div class="card-body">
            <table class="table table-centered">
                <thead>
                    <tr>
                        <th scope="col">订单编号</th>
                        <th scope="col">订单名称</th>
                        <th scope="col">下单时间</th>
                        <th scope="col">交易金额</th>
                        <th scope="col">商品图片</th>
                        <th scope="col">商品状态</th>
                    </tr>
                </thead>
                <tbody v-for="my_purchased in my_purchaseds" :key="my_purchased.id">
                    <tr class="purchased_info">
                        <td scope="row">{{ my_purchased.id }}</td>
                        <td>{{ my_purchased.title }}</td>
                        <td>{{ my_purchased.purchase_time }}</td>
                        <td>{{ my_purchased.price }}</td>
                        <td><img :src="my_purchased.photo" style="width: 50px;" alt=""></td>
                        <td>
                            <button type="button" class="btn btn-danger" style="width: 120px;" v-if="!my_purchased.is_apply" @click="to_return_goods(my_purchased.photo, my_purchased.price, my_purchased.title, my_purchased.size, my_purchased.purchase_number, my_purchased.purchase_color, my_purchased.id)">申请退货</button>
                            <button type="button" class="btn btn-primary" style="width: 120px;" v-if="my_purchased.is_apply">申请退货中</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="tanchuang" v-if="is_open">
        <div class="mb-3">
            <div class="info_confirm">请确认是否是所选商品</div>
            <input type="text" class="form-control" :placeholder="return_goods_title" disabled>
            <form>
            <div class="mb-3">
                <div class="info_confirm">请描述退货理由</div>
                <textarea class="form-control return_goods_reason" v-model="return_goods_reason" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            </form>
        </div>
        <div>
            <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_return_goods">确定</button>
            <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
import { useStore } from 'vuex';
import { ref } from 'vue';
import dayjs from 'dayjs';
export default {
    name: 'MyShelvesView',
    setup() {
        const store = useStore();
        const my_purchaseds = ref([]);
        const is_open = ref(false);
        const return_goods_photo = ref('');
        const return_goods_price = ref('');
        const return_goods_title = ref('');
        const return_goods_size = ref('');
        const return_goods_number = ref('');
        const return_goods_color = ref('');
        const return_goods_reason = ref('');
        const return_goods_id = ref('');
        const new_my_purchaseds = ref([]);
        const return_current_time = ref('');
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');

        $.ajax({
            url: "http://47.121.28.202:8000/settings/purchased/",
            yupr: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            success(resp) {
                for (let i of resp) {
                    if(i.consumer_id === store.state.user.id) {
                        my_purchaseds.value.push(i);
                    }
                }
            }
        })

        const to_return_goods = (goods_photo, price, title, size, number, color, id) => {
            is_open.value = true;
            return_goods_photo.value = goods_photo;
            return_goods_price.value = price;
            return_goods_title.value = title;
            return_goods_size.value = size;
            return_goods_number.value = number;
            return_goods_color.value = color;
            return_goods_id.value = id;
        }
        
        const close = () => {
            is_open.value = false;
        }

        const confirm_return_goods = () => {
            return_current_time.value = formattedDate;
            $.ajax({
                url: "http://47.121.28.202:8000/settings/return_goods/",
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    photo: return_goods_photo.value,
                    price: return_goods_price.value,
                    title: return_goods_title.value,
                    size: return_goods_size.value,
                    consumer_id: store.state.user.id,
                    consumer_name: store.state.user.username,
                    consumer_address: store.state.user.consumer_address,
                    return_time: formattedDate,
                    purchase_number: return_goods_number.value,
                    reason: return_goods_reason.value,
                },
                success() {
                    is_open.value = false;
                    const ws = new WebSocket('ws://47.121.28.202:8000/ws/buyinginformation/');
                    ws.onopen = () => {
                        console.log("触发了函数");
                        ws.send(JSON.stringify({
                            inbound_way: "用户退货",
                            title: return_goods_title.value,
                            inbound_time: return_current_time.value,
                            photo: return_goods_photo.value,
                            describe: return_goods_reason.value,
                            return_id: return_goods_id.value,
                        }))
                    }
                    $.ajax({
                        url: "http://47.121.28.202:8000/settings/purchased/",
                        type: "PATCH",
                        headers: {
                            'Authorization': "Bearer " + store.state.user.access,
                        },
                        data: {
                            purchased_id: parseInt(return_goods_id.value),
                            is_apply: "True"
                        },
                        success() {
                            new_my_purchaseds.value = [];
                            my_purchaseds.value = [];
                            $.ajax({
                                url: "http://47.121.28.202:8000/settings/purchased/",
                                yupr: "GET",
                                headers: {
                                    'Authorization': "Bearer " + store.state.user.access,
                                },
                                success(resp) {
                                    for (let i of resp) {
                                        if(i.consumer_id === store.state.user.id) {
                                            new_my_purchaseds.value.push(i);
                                        }
                                    }
                                    my_purchaseds.value = new_my_purchaseds.value;
                                    return_goods_reason.value = "";
                                }
                            })
                        }
                    })
                }
            })
        }

        return {
            my_purchaseds,
            to_return_goods,
            is_open,
            confirm_return_goods,
            close,
            return_goods_reason,
            return_goods_title
        }
    }
}
</script>

<style scoped>
.table-centered th,  
.table-centered td {  
    vertical-align: middle; 
    text-align: center;
}  
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0px;
}
.form-control {
    width: 300px;
}
.return_goods_reason {
    margin-top: 5px;
}
</style>